import React, { useEffect, useState } from 'react'
import axios from 'axios'



interface ListItemState {
	title: string,
	id: string,
	children?: ListItemState[]
}

const Index: React.FC = () => {
	const [list, setList] = useState<ListItemState[]>([])
	const [activeIndex, setActiveIndex] = useState(0)

	const fetchList = async () => {
		const resp = await axios.get('/api/city/list')
		setList(resp.data.data)
	}
	useEffect(() => {
		fetchList()
	}, [])

	return <div className='tab'>
		<div className='title'>
			{
				list.length > 0 && list.map((v, i) => {
					return <b key={v.id}
						className={i === activeIndex ? 'active' : ''}
						onClick={() => setActiveIndex(i)}
					>{v.title}</b>
				})
			}
		</div>
		<div className='content'>
			{
				list.length > 0 && list[activeIndex].children?.map((v, i) => {
					return <b key={v.id}>{v.title}</b>
				})
			}
		</div>
	</div>
}


export default Index